<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      *{
          padding: 0;
          margin: 0;
      }
      .wrap {
          width: 800px;
          margin: 0 auto;
          height: 700px;
      } 
      ul {
         list-style: none;
         margin-right: -10px;
      }
      li {
        float: left;
        width: 260px;
        margin-right: 10px;
        margin-bottom: 30px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)!important;
      }
      li img {
        width: 260px; 
         
      }
      li div {
          display: block;
          text-align: center;
      }
      li div p {
          padding: 1em 0;
      }
     .wrap h1 {
          text-align: center;
          color: #666;
          border-bottom: #ccc 1px solid;
          padding: 0.5em;
          margin-bottom: 30px;
      }
      .test1 .left {
          height: 100px;
          width: 200px;
          background: red;
          float: left;
      }
      .test1 .main {
          height: 100px;
          background: blue;
          margin-left: 210px;
      }
      .test2 .left {
          height: 100px;
          width: 200px;
          background: red;
          float: left;
      }
      .test2 .right {
          height: 100px;
          width: 200px;
          background: yellow;
          float: right;
      }
      .test2 .main {
          height: 100px;
          background: blue;
          margin-left: 210px;
          margin-right: 210px;
      }
      .test3 {
          background: #ccc;
          height: 300px;
          width: 600px;
          margin: 0 auto;
          position: relative;
          margin-top: 10px;
      }
      .test3 .red {
          height: 200px;
          width: 300px;
          background: red;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
      }
      .test4 {
          background: #ccc;
          height: 300px;
          width: 600px;
          margin: 0 auto;
          margin-top: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
      }
       .test4 .son{
          text-align: center;
       } 
       .test5 {
          background: #ccc;
          height: 300px;
          width: 600px;
          margin: 0 auto;
          margin-top: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
      }
      .test5 .btn {
          background: red;
          border: none;
          margin-right: 20px;
          color: white;
          height: 30px;
          width: 50px;
      }
      .test6 {
          background: #ccc;
          height: 300px;
          width: 600px;
          margin: 0 auto;
          margin-top: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
      }
      .test6 img {
          height: 200px;
          height: 100px;
      }
      .test7 {
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          background: black;
          border: 1px red solid;
          height: 100px;
          width: 150px;
      }
      .test8 {
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          border: 1px red solid;
          background: palevioletred;
      }
    </style>
</head>
<body>
    <div class="wrap">
         <h1>风景列表</h1>
         <ul>
             <li>
                 <img src="http://cdn.jscode.me/283a4100-10cd-4208-a3b5-4030ec03acf6" alt="">
                 <div>
                     <p>风景如画</p>
                 </div>
             </li>
             <li>
                 <img src="http://cdn.jscode.me/283a4100-10cd-4208-a3b5-4030ec03acf6" alt="">
                 <div>
                     <p>风景如画</p>
                 </div>
             </li>
             <li>
                 <img src="http://cdn.jscode.me/283a4100-10cd-4208-a3b5-4030ec03acf6" alt="">
                 <div>
                     <p>风景如画</p>
                 </div>
             </li>
             <li>
                 <img src="http://cdn.jscode.me/283a4100-10cd-4208-a3b5-4030ec03acf6" alt="">
                 <div>
                     <p>风景如画</p>
                 </div>
             </li>
             <li>
                 <img src="http://cdn.jscode.me/283a4100-10cd-4208-a3b5-4030ec03acf6" alt="">
                 <div>
                     <p>风景如画</p>
                 </div>
             </li>
             <li>
                 <img src="http://cdn.jscode.me/283a4100-10cd-4208-a3b5-4030ec03acf6" alt="">
                 <div>
                     <p>风景如画</p>
                 </div>
             </li>
         </ul>
    </div>
    <p style="text-align:center;margin-bottom:20px;">两栏布局</p>
    <div class="test1">
        <div class="left"></div>
        <div class="main"></div>
    </div>
    <p style="text-align:center;margin-bottom:20px;">三栏布局</p>
    <div class="test2">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
    </div>
    <div class="test3">
         <div class="red">宽度300px,高度200px,在页面水平居中</div>
    </div>
    <div class="test4">
        <div class="son">
                <h1 style="text-algin:center;">这是标题</h1>
                <p >这是内容，这段文字在当前区块内垂直水平居中</p>  
        </div>
    </div>
    <div class="test5">
        <button class="btn">按钮2</button>
        <button class="btn">按钮2</button>
        <button class="btn">按钮2</button>
    </div>
    <div class="test6">
            <img src="http://cdn.jscode.me/283a4100-10cd-4208-a3b5-4030ec03acf6" alt="">
        </div>
    <!-- <div class="test7">
          
      </div> -->
      <div class="test8">
            <h1>这里是内容</h1>
            <p>内容的宽高不定</p>
            <p>这个做出来了那个固定宽高的也就可以了</p>
        </div>
</body>
</html>